import React from 'react'
import header from '../../image/cat_advice.png'
import PetTrait from '../../components/PetTrait'
import { back } from '../../api/public'
import { NavBar } from 'antd-mobile'
//养狗建议
export default function CatAdvice() {
  const dogTypes = [
    {id:12,name:'橘猫',advantage:'性格，能吃，有的很警惕，有的很粘人。',defect:'未知'},
    {id:15,name:'狸花猫',advantage:'性格，聪明机警，不恋家。',defect:'未知'},
    {id:14,name:'美短',advantage:'生性聪明，性格温顺。非常有耐心，适应能力强，体质好，不容易生病。',defect:'掉毛比较厉害。'},
    {id:1,name:'英短',advantage:'安静的小胖子，精力旺盛，容易训练。比较粘人的品种，喜欢跟你上厕所。',defect:'需要注意体重问题，控制好食量。'},
    {id:2,name:'布偶',advantage:'性格大胆，对人友善。',defect:'忍耐力特别强，对小孩子容忍度高。'},
    {id:3,name:'加菲猫',advantage:'有一部分懒懒的不爱动，安静甜美。有一部分非常活泼，顽皮。',defect:'鼻短，泪痕，呼吸道等。'},
    {id:4,name:'德文',advantage:'比较粘人的品种',defect:'性格非常好，还不怎么掉毛。'},
    {id:5,name:'阿比西尼亚',advantage:'对主人忠诚，是一种非常自信，独立的猫猫。',defect:'精力充沛，需要一定的活动量消耗。'},
    {id:6,name:'斯芬克斯',advantage:'性格温顺，没有毛发，喜欢粘人。',defect:'注意保暖，皮肤护理。'},
    {id:7,name:'矮脚猫',advantage:'粘人，适应能力强。聪明，好奇心重，喜欢坐立观察。',defect:'打架不占优势，多猫家庭注意。'},
    {id:8,name:'俄罗斯蓝猫',advantage:'文静，敏感，对主人很友善。',defect:'对陌生人比较警惕，贪玩。'},
    {id:9,name:'缅因猫',advantage:'温柔的巨人，对人亲近。',defect:'性格倔强，非常勇敢。'},
    {id:10,name:'孟加拉猫',advantage:'活泼好奇心重，性格好。',defect:'注意毛发护理和社会化训练。'},
    {id:11,name:'波斯猫',advantage:'高贵优雅，性格温顺。',defect:'爱撒娇喜欢和人相处。'},
    {id:13,name:'阿拉斯加',advantage:'体型大有安全感，不乱叫。',defect:'吃得多，肠胃脆弱，精力旺盛。'},

  
  ]
  return (
    <div className='dog_container'>
        <NavBar onBack={back}>养猫建议</NavBar>
        <div className="dog_header">
          <img width='100%' alt="" src={header} />
        </div>
        <div style={{backgroundColor:'#f2f7f7'}}>
            <div className="content" style={{fontSize:'18px',padding:'5px',textAlign:'left'}}>
                <p>猫咪是一类很捉摸不透的宠物，大多时候都是你得顺着它的意愿来，你有中意的猫咪么？</p>
                <p>不同品种都有不同的性格和特点，大家可以根据自己的条件，性格来选择适合自己的狗狗～</p>
            </div> 

            <div className="dog-types">
            {
              dogTypes.map((item,index)=>{
                return <PetTrait key={item.id} name={item.name} advantage={item.advantage} defect = {item.defect}></PetTrait>
              })
            }
            </div>
        </div>
    </div>
  )
}
